<template>
  <div class="GykjMap-wharf">
    <div class="GykjMap-wharf-tabs">
      <Tabs type="card" v-model="activeTab" :animated="false">
        <TabPane label="基本情况" name="info"></TabPane>
        <!--<TabPane label="非工程措施" name="measures"></TabPane>-->
      </Tabs>
    </div>
    <div class="GykjMap-wharf-content">
      <div class="GykjMap-wharf-table" v-show="activeTab === 'info'">
        <div>

          <table class="table" border>
            <tbody>
              <tr>
                <td class="key">码头名称</td>
                <td colspan="3">{{fliterData('码头名称')}}</td>
              </tr>
              <tr>
                <td class="key">所在河道</td>
                <td>{{fliterData('所在河道')}}</td>
                <td class="key">所在河道</td>
                <td>{{fliterData('所在河道')}}</td>
              </tr>
              <tr>
                <td class="key">地理位置</td>
                <td>{{fliterData('地理位置')}}</td>
                <td class="key">桩号</td>
                <td>{{fliterData('桩号')}}</td>
              </tr>
              <tr>
                <td class="key">防洪标准（重现期）</td>
                <td>{{fliterData('防洪标准（重现期）')}}</td>
                <td class="key">设计靠泊能力（吨）</td>
                <td>{{fliterData('设计靠泊能力（吨）')}}</td>
              </tr>
              <tr>
                <td class="key">建设时间(年)</td>
                <td>{{fliterData('建设时间(年)')}}</td>
                <td class="key">使用年限</td>
                <td>{{fliterData('使用年限')}}</td>
              </tr>
              <tr>
                <td class="key">管理单位</td>
                <td>{{fliterData('管理单位')}}</td>
                <td class="key">主管部门</td>
                <td>{{fliterData('主管部门')}}</td>
              </tr>
              <tr>
                <td class="key">结构型式</td>
                <td>{{fliterData('结构型式')}}</td>
                <td class="key">用途</td>
                <td>{{fliterData('用途')}}</td>
              </tr>
            </tbody>
          </table>

        </div>

        <div>
          <base-title title="管理单位负责人" height="24px" fontSize="14px"></base-title>

          <table class="table" border>
            <tbody>
              <tr>
                <td class="key">姓名</td>
                <td>{{fliterData('管理单位负责人姓名')}}</td>
                <td class="key">职务</td>
                <td>{{fliterData('管理单位负责人职务')}}</td>
              </tr>
              <tr>
                <td class="key">电话</td>
                <td>{{fliterData('管理单位负责人电话')}}</td>
                <td class="key"></td>
                <td></td>
              </tr>
            </tbody>
          </table>

        </div>

        <div>
          <base-title title="防洪评价" height="24px" fontSize="14px"></base-title>

          <table class="table" border>
            <tbody>
              <tr>
                <td colspan="2" class="key">是否进行过防洪评价</td>
                <td colspan="4">{{fliterDouData('防洪评价.是否进行过防洪评价')}}</td>
              </tr>
              <tr>
                <td class="key">时间</td>
                <td>{{fliterDouData('防洪评价.时间')}}</td>
                <td class="key">主要结论</td>
                <td>{{fliterDouData('防洪评价.主要结论')}}</td>
                <td class="key">补救措施落实情况</td>
                <td>{{fliterDouData('防洪评价.补救措施落实情况')}}</td>
              </tr>
            </tbody>
          </table>

        </div>

      </div>

      <div class="GykjMap-wharf-table" v-show="activeTab === 'measures'">

      </div>
    </div>

  </div>
</template>

<script>
import BaseTitle from '../../public/base-title/base-title'

export default {
  props: {
    isInit: {
      type: Boolean,
      default: true
    }
  },
  components: {
    BaseTitle
  },
  mounted () {
    if (this.isInit) {
      this.initData()
    }
  },
  data () {
    return {
      resultData: {},
      activeTab: 'info'
    }
  },
  methods: {
    fliterData (key) {
      if (this.resultData[key] === 0) {
        return this.resultData[key]
      }
      return this.resultData[key] || '--'
    },
    fliterDouData (key) {
      const arr = key.split('.')

      if (this.resultData[arr[0]] === undefined) {
        this.resultData[arr[0]] = {}
      }

      return this.resultData[arr[0]][arr[1]] || '--'
    },
    initData (data = {}) {
      this.resultData = data
      this.activeTab = 'info'
    }
  }
}
</script>

<style lang="scss" scoped>
.GykjMap-wharf {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  .GykjMap-wharf-tabs {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 5px;
  }
  .GykjMap-wharf-content {
    position: absolute;
    left: 5px;
    right: 0;
    top: 40px;
    bottom: 5px;
    overflow: auto;
    .GykjMap-wharf-table {
      width: 100%;
      .table {
        width: 100%;
        margin: auto;
        font-size: 14px;
        border: 1px solid #ddd;
        margin: 5px 0;
        td {
          padding: 5px;
          &.key {
            width: 100px;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
